<template>
  <van-nav-bar :title="$t('order.title')">
    <template #right>
      <van-button
        @click="onShow"
        type="primary"
        round
        plain
        size="small"
        class="order-btn"
      >
        {{ calendar.date || $t("order.date") }}
      </van-button>
    </template>
  </van-nav-bar>
  <van-tabs
    :active="active"
    line-height="0"
    title-active-color="#FF1FD9"
    class="app-body order"
    @change="onChange"
  >
    <van-tab
      v-for="(item, index) in tabList"
      :key="index"
      :name="item.type"
      :title="item.title"
      style="height: 100%"
    >
      <!-- <van-list
        v-model:loading="list.loading"
        :finished="list.finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="order-list"
      > -->
      <div class="order-list" v-if="list.nums.length">
        <Card
          v-for="item in list.nums"
          :key="item"
          :type="item.status"
          :item="item"
          @click="onJump(item)"
          >{{ item }}</Card
        >
        <br />
      </div>
      <Empty :description="$t('wallet.noSome')" v-else></Empty>
      <!-- </van-list> -->
    </van-tab>
  </van-tabs>
  <van-calendar
    :show="calendar.show"
    @select="onSelect"
    :minDate="calendar.minDate"
    :maxDate="calendar.maxDate"
    ref="timeSelect"
  >
    <template #footer>
      <div class="app-flex-bet">
        <van-button
          class="date-btn"
          color="#0083FF"
          size="small"
          round
          @click="onReset"
          >{{ $t("order.reset") }}</van-button
        >
        <van-button
          class="date-btn"
          type="primary"
          size="small"
          round
          @click="onSure"
          >{{ $t("order.sure") }}</van-button
        >
      </div>
    </template>
  </van-calendar>
</template>
<script setup>
import { reactive, ref } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import Empty from "@/components/Empty";
import { getOrders } from "@/api/user";
import Card from "./components/Card.vue";
const { t } = useI18n();
const router = useRouter();
const timeSelect = ref(null);
const active = ref(-1);
const tabList = [
  { title: t("order.all"), type: -1 },
  { title: t("order.doing"), type: 0 },
  { title: t("order.success"), type: 1 },
  { title: t("order.fail"), type: 2 },
];

const calendar = reactive({
  show: false,
  minDate: new Date("2022-01-01"),
  maxDate: new Date(),
  chooseDate: "",
  date: "",
  select: "",
  timer: "",
});

/**
 * 加载模块
 */
const list = reactive({
  loading: false,
  finished: false,
  num: 0,
  nums: [],
  allList: [],
  error: false,
});
async function onLoad() {
  // list.num++;
  list.loading = true;
  let param = {
    status: active.value,
  };
  if (calendar.select) {
    param.endTime = `${calendar.select} 23:59:59`;
    param.startTime = `${calendar.select} 00:00:00`;
  }
  let ret = await getOrders({ ...param }).catch((err) => {
    list.loading = false;
  });
  if (ret.code != 200) return;
  list.nums = ret.data;
  list.allList = ret.data;
}
onLoad();
function onChange(e) {
  if (e == -1) return (list.nums = list.allList);
  list.nums = list.allList.filter((v) => v.status == e);
}
/**
 * 日期模块
 */

function onShow() {
  calendar.show = !calendar.show;
}
function onSelect(e) {
  calendar.select = dayjs(e).format("YYYY-MM-DD");
  calendar.timer = e;
}
function onSure(e) {
  calendar.date = calendar.select;
  onShow();
  onLoad();
}
function onReset() {
  calendar.date = "";
  calendar.select = "";
  timeSelect.value?.reset();
  onShow();
  onLoad();
}
function onJump(val) {
  router.push({ path: "/orderDetail", query: { id: val.id } });
}
</script>
<style lang="less" scoped>
.order {
  background: var(--bg);
  --van-tabs-nav-background-color: var(--bg);
  &-list {
    height: calc(100vh - 137px);
    overflow: auto;
  }
}
.order-btn {
  font-size: 12px;
  padding: 0 15px;
  line-height: 28px;
  height: 28px;
}
.date-btn {
  width: 35%;
  margin: 5px 30px;
}
</style>
